<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每一点</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .reward-sel-wrap {
            color: #223318;
            font-size: 14px;
            padding-bottom: 20px;
        }

        .reward-sel-wrap h4 {
            font-size: 18px;
            font-weight: bold;
            margin: 0 30px;
            padding: 30px 0;
            overflow: hidden;
            border-bottom: 1px solid #dee0e1;
        }

        .reward-sel-wrap .reward-list .reward-item {
            margin: 0 30px;
            padding: 30px 0;
            border-bottom: 1px solid #dee0e1;
            position: relative;
            cursor: pointer;
        }

        .reward-sel-wrap .reward-list .reward-item .reward-money .b {
            margin-left: 20px;
            display: block;
            height: 18px;
            line-height: 18px;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .reward-sel-wrap .reward-list .reward-item .reward-cont {
            margin-left: 36px;
            clear: both;
            color: #7A8087;
        }

        .custom-radio {
            position: relative;
        }

        .custom-radio-label {
            overflow: hidden;
        }

        .reward-sel-wrap .reward-list .reward-item .reward-money {
            float: left;
            width: calc(100% - 36px);
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container">
    <div class="layui-row" style="border-top: #DEE0E1  solid 1px;">
        <div style="text-align: center;" class="layui-col-md8 layui-col-md-offset2">
            <h2 style="font-size: 24px;line-height: 50px;padding-top: 25px" id="project_title"></h2>
        </div>
    </div>
    <div class="layui-row" style="border-top: #DEE0E1  solid 1px; margin-top: 25px;color: #0C0C0C">

        <div class="reward-sel-wrap"><h4>选择您中意的回报：</h4>
            <ul id="rewardList" class="reward-list">

            </ul>
        </div>
    </div>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'layedit'], function () {
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit;

        var projectId = [[${projectId}]];
        var project = [[${project}]];
        initRewardList();

        function initRewardList() {
            $("#project_title").text(project.title)
            $.ajax({
                url: "/web/reward/getProjectReward",
                type: "post",
                data: {"pid": projectId},
                success: function (data) {
                    console.log(data)
                    if (data.code == 200) {
                        var str = "";
                        str += "<!--                无偿-->\n" +
                            "                <li class=\"reward-item y\" data-num=\"10\" noreward=\"1\">\n" +
                            "                    <div class=\"custom-radio\">\n" +
                            "                        <input class=\"layui-input hidden\" type=\"radio\" name=\"rid\" value=\"-1\">\n" +
                            "                        <div class=\"custom-radio-label\" for=\"reward-1\">\n" +
                            "                            <span style=\"float: left\"><i class=\"layui-icon\">&#xe63f;</i></span>\n" +
                            "                            <div class=\"reward-money\">\n" +
                            "                                <p class=\"b\">无偿支持</p>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"reward-cont\">\n" +
                            "                                <p class=\"c clearfix reward_introduce\">不需要回报，我只是支持有梦想的人。</p>\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </li>";

                        var data = data.data;
                        for (var i = 0; i < data.length; i++) {
                            str += "\n" +
                                "<!--                有偿-->\n" +
                                "                <li class=\"reward-item y\" data-num=\"10\" noreward=\"1\">\n" +
                                "                    <div class=\"custom-radio\">\n" +
                                "                        <input class=\"layui-input hidden\" type=\"radio\" name=\"rid\" value=\"" + data[i].id + "\">\n" +
                                "                        <div class=\"custom-radio-label\" for=\"reward-1\">\n" +
                                "                            <span style=\"float: left\"><i class=\"layui-icon\">&#xe63f;</i></span>\n" +
                                "                            <div class=\"reward-money\">\n" +
                                "                                <p class=\"b\">" + data[i].support + "  " + data[i].title + "</p>\n" +
                                "                            </div>\n" +
                                "                            <div class=\"reward-cont\">\n" +
                                "                                <p class=\"c clearfix reward_introduce\">" + data[i].introduce + "</p>\n" +
                                "                                <p class=\"c clearfix reward_provide\">回报发放时间:<span>" + data[i].provideYear + "年" + data[i].provideMonth + "月</span></p>\n" +
                                "                            </div>\n" +
                                "                        </div>\n" +
                                "                    </div>\n" +
                                "                </li>";
                        }
                        $(".reward-list").html(str);
                    }
                }
            })
        }

        $("ul#rewardList").on("click", "li", function () {      //只需要找到你点击的是哪个ul里面的就行
            $(this).find(".layui-icon").html("&#xe643;")
            $(this).css("color", "#FE6500")
            var id =  $(this).find("input").val();
            window.location.href = "/web/project_order_operation?rewardId=" + id+"&projectId="+projectId;
        });

    });

</script>
</body>
</html>